<template>
	<view>
		<!-- 导航栏 -->
		<navigation :showIcon="false" title="报表中心"></navigation>
		<view class="">
			程序猿正在努力开发中...
		</view>
		<view class="" style="background: #FFFFFF;" v-if="false">
			<uni-segmented-control :current="current" :values="items"  @clickItem="onClickItem" style-type="text" active-color="#406CEB"></uni-segmented-control>
		</view>
		<view class="content" v-if="false">
			<view v-show="current === 0">
				<view class="center">
					<view class="">
						<view class="title">
							数据显示
						</view>
						<view class="mian">
							<text>客资总计</text>
							<text>300</text>
						</view>
						<view class="mian">
							<text>未跟进</text>
							<text>300</text>
						</view>
						<view class="mian">
							<text>未接通</text>
							<text>300</text>
						</view>
						<view class="mian">
							<text>跟进中</text>
							<text>30</text>
						</view>
						<view class="mian">
							<text>不在跟进</text>
							<text>300</text>
						</view>
						<view class="mian">
							<text>无效客户</text>
							<text>300</text>
						</view>					
						<view class="mian">
							<text>预约到店</text>
							<text>300</text>
						</view>
						<view class="mian">
							<text>订单客户</text>
							<text>300</text>
						</view>
					</view>
					<view class="echars">
						<view class="">
							<!-- <text>客户分布</text>
							<view class="">
								<text>前期咨询</text>
								<text>邀约试听</text>
							</view> -->

						</view>
						<pie-chart ref="pieChart0" :dataAs="pieData" canvasId="index_pie_1" />


					</view>
				</view>
			</view>

			<view v-show="current === 1">
				<view class="con">
					<view class="c_top">
						<view class="left">
							<view class="l_img">
							<image src="../../static/orderImgs/qianyueshu@2x.png"></image>	
							</view>
							<view class="l_text">
								<text style="font-size:36upx;font-family:PingFang SC;font-weight:500;color:rgba(46,52,68,1);margin-top: 42upx;">4000</text>
								<text style="font-size:26upx;font-family:PingFang SC;font-weight:500;color:rgba(106,106,106,1);margin-top: 26upx;">签约数</text>
							</view>
						</view>
						<view class="right">
							<view class="r_img">
								<image src="../../static/orderImgs/zongjine@2x.png"></image>
							</view>
							<view class="r_text">
								<text style="font-size:36upx;font-family:PingFang SC;font-weight:500;color:rgba(46,52,68,1);margin-top: 42upx;">80656.00</text>
								<text style="font-size:26upx;font-family:PingFang SC;font-weight:500;color:rgba(106,106,106,1);margin-top: 26upx;">总业绩金额</text>
							</view>
						</view>
					</view>
					<view class="c_center">
						<text>业绩统计</text>
						<view class="c_img">
							<view style="position: relative;">
								<image src="../../static/orderImgs/zongshu.png"></image>
							    <text class="text1" style="width:69upx;height:31upx;">400</text>
								<text class="text2" style="width:104upx;height:25upx;color:rgba(77,115,133,1);">客资总数</text>
							</view>
							<view style="position: relative;">
								<image src="../../static/orderImgs/zhuanhua.png"></image>
								<text class="text1" style="width:82upx;height:31upx;">30%</text>
								<text class="text2" style="width:130upx;height:25upx;color:rgba(101,110,135,1);">客资转化率</text>
							</view>
						</view>
						<view class="c_img">
							<view style="position: relative;">
								<image src="../../static/orderImgs/dingdan.png"></image>
							     <text class="text1" style="width:69upx;height:31upx;">400</text>
							     <text class="text2" style="width:104upx;height:25upx;color:rgba(115,100,138,1)">订单数</text>
							</view>
							<view style="position: relative;">
								<image src="../../static/orderImgs/yejijine.png"></image>
							    <text class="text1" style="width:68upx;height:31upx;">300</text>
							    <text class="text2" style="width:111upx;height:26upx;color:rgba(140,130,103,1)">业绩金额</text>
							</view>
						</view>
					</view>
					<view class="c_bottom">
						<text>跟进统计</text>
						<view class="c_img">
							<view style="position: relative;">
								<image src="../../static/orderImgs/genjin.png"></image>
							    <text class="text1" style="width:68upx;height:31upx;">300</text>
							    <text class="text2" style="width:111upx;height:26upx;color:rgba(54,86,105,1)">跟进中</text>
							</view>
							<view style="position: relative;">
								<image src="../../static/orderImgs/yuyuedaodian.png"></image>
								<text class="text1" style="width:68upx;height:31upx;">300</text>
								<text class="text2" style="width:111upx;height:26upx;color:rgba(54,86,105,1)">预约到店</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="current === 2">
				<view class="t_content">
					<view class="t_list">
						<text>获取方式预览</text>
					</view>
					<view class="t_list">
						<text>分配获取</text>
					</view>
					<view class="t_list">
						<text>公海申请</text>
					</view>
					<view class="t_list">
						<text>自行添加</text>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import PieChart from '@/component/stan-ucharts/PieChart.vue';
	import navigation from '@/component/navigation.vue'
	export default {

		components: {
			navigation,
			PieChart
		},
		data() {
			return {
				items: ['客资报表', '订单列表', '获取报表'],
				current: 0,


				pieData: {
					//饼状图数据
					series: [{
							name: '有效',
							data: 50
						},
						{
							name: '无效',
							data: 30
						},
						{
							name: '跟进中',
							data: 20
						},
						{
							name: '订单客户',
							data: 18
						},
						{
							name: '不在跟进',
							data: 8
						}
					]
				}
			};
		},
		created() {
            // 环状图
			// this.$refs['pieChart0'].showCharts();
		},
		mounted() {
			
		},
		methods: {
			onClickItem(e) {

				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		background: rgba(245, 246, 246, 1);
	}

	.center {
		width: 100%;
		padding: 30upx 40upx;
		box-sizing: border-box;
		background: #FFFFFF;

		.title {
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			border-bottom: 1upx solid rgba(245, 246, 246, 1);
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(25, 25, 25, 1);
		}

		.mian {
			padding-top: 30upx;
			display: flex;
			justify-content: space-between;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(106, 106, 106, 1);

			text:last-child {
				padding-right: 50upx;
				text-align: left;
			}
		}
	}

	.con {
		width: 100%;
		height: 973upx;
		padding: 0upx 32upx;
		margin-top: 16upx;
		box-sizing: border-box;
		background: #FFFFFF;

		.c_top {
			width: 100%;
			height: 160upx;
			border-bottom: 1upx solid #F5F6F6;
			box-sizing: border-box;
			.left{
				width: 50%;
				height: 100%;
				float: left;
				.l_img{
					width: 81upx;
					height: 100%;
					float: left;
					image{
						width: 81upx;
						height: 81upx;
						margin-top: 46upx;
					}
				}
				.l_text{
					width: 100upx;
					height: 100%;
					float: right;
					margin-right:130upx;
					text{
						width: 86upx;
						height: 28upx;
						display: block;
						
					}
				}	
			}
			.right{
				width: 50%;
				height: 100%;
				float: right;
				.r_img{
					width: 81upx;
					height: 100%;
					float: left;
					image{
						width: 81upx;
						height: 81upx;
					    margin-top: 46upx;
					}
				}
				.r_text{
					width: 161upx;
					height: 100%;
					float: right;
					margin-right:70upx;
					text{
						width: 100%;
						height: 28upx;
						display: block;
					}
				}
			}
		}

		.c_center {
			width: 100%;
			height: 452upx;
			border-bottom: 1upx solid #F5F6F6;
			padding: 50upx 0;
			box-sizing: border-box;
			text{
				width: 100%;
				height: 31upx;
				font-size:32upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(25,25,25,1);
			}
			.c_img{
				width: 100%;
				height: 131upx;
				display: flex;
				justify-content: space-between;
				margin-top: 23upx;
                image{
					width: 329upx;
					height: 131upx;
				}
				.text1{
					font-size:40upx;
					font-family:PingFang SC;
					font-weight:500;
					position:absolute;
					left: 86upx;
					top:20upx;
					color:rgba(35,52,35,1);
				}
				.text2{
					font-size:26upx;
					font-family:PingFang SC;
					font-weight:500;
					position: absolute;left: 86upx;top: 68upx;
				}
			}
		}

		.c_bottom {
			width: 100%;
			height: 312upx;
			padding-top: 46upx;
			box-sizing: border-box;
			text{
				width: 100%;
				height: 31upx;
				font-size:32upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(25,25,25,1);
			}
			.c_img{
				width: 100%;
				height: 131upx;
				display: flex;
				justify-content: space-around;
				margin-top: 23upx;
				image{
					width: 329upx;
					height: 131upx;
				}
				.text1{
					font-size:40upx;
					font-family:PingFang SC;
					font-weight:500;
					position:absolute;
					left: 86upx;
					top:20upx;
					color:rgba(35,52,35,1);
				}
				.text2{
					font-size:26upx;
					font-family:PingFang SC;
					font-weight:500;
					position: absolute;left: 86upx;top: 68upx;
				}
			
			}
		}
	}
	.t_content{
		width: 100%;
		height: 973upx;
		padding-left: 57upx;
		padding-top: 52upx;
		box-sizing: border-box;
		margin-top: 16upx;
		background: #ffffff;
		.t_list{
			width: 100%;
			height: 100upx;
			text{
				width: 100%;
				height: 26upx;
				font-size:28upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(25,25,25,1);
			}
		}
	}
</style>
